<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../css/wu.css" />
		<link rel="stylesheet" type="text/css" href="../css/icon.css" />
		
		<script type="text/javascript" src="../easyui/1.5.3/jquery.min.js"></script>
		<script type="text/javascript" src="../easyui/1.5.3/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../public/xheditor/xheditor-1.2.2.min.js"></script>
		<script type="text/javascript" src="../public/xheditor/xheditor_lang/zh-cn.js"></script>
		<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
	</head>
	<body>
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',fit:true">
		    	<!-- Begin of toolbar -->
		        <div id="wu-toolbar" class="datagrid-toolbar">
		            <div class="wu-toolbar-button">
		                <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
		                <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
		                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
		                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>
		            </div>
		            <div class="wu-toolbar-search">
		                <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
		                <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
		                <label>用户组：</label> 
		                <select class="easyui-combobox" panelHeight="auto" style="width:100px">
		                    <option value="0">选择用户组</option>
		                    <option value="1">黄钻</option>
		                    <option value="2">红钻</option>
		                    <option value="3">蓝钻</option>
		                </select>
		                <label>关键词：</label><input class="wu-text" style="width:100px">
		                <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
		            </div>
		        </div>
		        <!-- End of toolbar -->
		        <table id="dg" toolbar="#wu-toolbar"></table>
		    </div>
		</div>
		
		<div id="dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:500px; padding:10px;">
			<form id="form" method="post">
		        <table>
		            <tr>
		                <td width="80" align="right">标 题:</td>
		                <td><input type="text" name="title" class="wu-text" /></td>
		            </tr>
		            <tr>
		                <td align="right">作 者:</td>
		                <td><input type="text" name="name" class="wu-text" /></td>
		            </tr>
		            <tr>
		                <td align="right">邮 箱:</td>
		                <td><input type="text" name="mail" class="wu-text" /></td>
		            </tr>
		            <tr>
		                <td valign="top" align="right">内 容:</td>
		                <td><textarea name="text" rows="6" class="xheditor" style="width:340px"></textarea></td>
		            </tr>
		        </table>
		    </form>
		</div>

	</body>
	<script type="text/javascript">
		$('#dg').datagrid({
			url:'http://localhost:3000/Commend/list',
			method:'get',
			pagination:true,
			pageSize:2,
			pageList:[2,4,6,8,10],
			fit:true,
			columns:[[
//				{field:'checkbox',checkbox:true},
				{field:'title',title:'标题',width:150},
				{field:'name',title:'作者',width:150},
				{field:'text',title:'内容',width:200},
				{field:'date',title:'日期',width:200},
				{field:'btn',title:'评论列表',width:200,
					formatter:function(value,row,index){
						return '<a href="javascript:void(0)" onclick="deleteCom(\''+ row._id+'\')">删除</a>';
					}
				}
			]] 
		})
	
		function openAdd(){
			$('#form').form('clear');
			$('#dialog').dialog({
				closed:false,
				modal:true,
				title:'添加信息',
				buttons:[{
					text:'确定',
					iconCls:'icon-ok',
					handler:comAddAction
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dialog').dialog('close');
					}
				}]
			})
		}
	
		function comAddAction(){
//			console.log($("#form").serializeJSON());
			if($(this).form('enableValidation').form('validate')){
				$.ajax({
					type:"post",
					url:"http://localhost:3000/commend/data",
					data:$("#form").serializeJSON()
				}).then(function(res){
					console.log(res);
					$('#dialog').dialog('close');
					$('#dg').datagrid('reload');
				});
			}else{
				alert('no');
			}
		}
		
		function deleteCom(id){
			$.ajax({
				type:"delete",
				url:"http://localhost:3000/commend/data/"+id
			}).then(function(res){
				$('#dg').datagrid('reload');
			});
		}
		
	</script>
</html>
